<template>
    <div class="picker" :class="{ 'picker-3d': rotateEffect }">
        <div class="picker-toolbar" v-if="showToolbar">
            <slot></slot>
        </div>
        <div class="picker-items">
            <picker-slot v-for="(slot,key) in slots" :key="key" :valueKey="valueKey" :values="slot.values || []" :text-align="slot.textAlign || 'center'" :visible-item-count="visibleItemCount" :class-name="slot.className" :flex="slot.flex" v-model="values[slot.valueIndex]" :rotate-effect="rotateEffect" :divider="slot.divider" :content="slot.content" :itemHeight="itemHeight" :default-index="slot.defaultIndex"></picker-slot>
            <div class="picker-center-highlight" :style="{ height: itemHeight+ 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
            <div class="v-picker-center-mask"></div>
        </div>
    </div>
</template>

<style>
.picker {
    overflow: hidden;
    background-color: #FFF;
}

.picker-toolbar {
    height: 0.8rem;
}

.v-picker-center-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0.95),
            hsla(0, 0%, 100%, 0.6)
        ),
        linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6));
    background-position: top, bottom;
    background-size: 100% 42%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 9;
}

.picker-items {
    display: flex;
    justify-content: center;
    padding: 0;
    text-align: right;
    font-size: 0.48rem;
    position: relative;
}

.picker-center-highlight {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    margin-top: -0.36rem;
    pointer-events: none;
}

.picker-center-highlight:before,
.picker-center-highlight:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #dddee3;
    display: block;
    z-index: 15;
}

.picker-center-highlight:before {
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
}

.picker-center-highlight:after {
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
}
</style>

<script>
import PickerSlot from './picker-slot.vue';
let dw = window.innerWidth || window.document.documentElement.clientWidth || window.document.body.clientWidth;
dw = (dw * 100 / (2 * 375));

const ITEM_HEIGHT = 0.72 * dw;
export default {
    name: 'mt-picker',

    componentName: 'picker',

    props: {
        slots: {
            type: Array
        },
        showToolbar: {
            type: Boolean,
            default: false
        },
        visibleItemCount: {
            type: Number,
            default: 5
        },
        valueKey: String,
        rotateEffect: {
            type: Boolean,
            default: false
        },
        itemHeight: {
            type: Number,
            default: ITEM_HEIGHT
        }
    },

    created () {
        this.$on('slotValueChange', this.slotValueChange);
        this.slotValueChange();
    },

    methods: {
        slotValueChange () {
            this.$emit('change', this, this.values);
        },

        getSlot (slotIndex) {
            var slots = this.slots || [];
            var count = 0;
            var target;
            var children = this.$children.filter(child => child.$options.name === 'picker-slot');

            slots.forEach(function (slot, index) {
                if (!slot.divider) {
                    if (slotIndex === count) {
                        target = children[index];
                    }
                    count++;
                }
            });

            return target;
        },
        getSlotValue (index) {
            var slot = this.getSlot(index);
            if (slot) {
                return slot.currentValue;
            }
            return null;
        },
        setSlotValue (index, value) {
            var slot = this.getSlot(index);
            if (slot) {
                slot.currentValue = value;
            }
        },
        getSlotValues (index) {
            var slot = this.getSlot(index);
            if (slot) {
                return slot.mutatingValues;
            }
            return null;
        },
        setSlotValues (index, values) {
            var slot = this.getSlot(index);
            if (slot) {
                slot.mutatingValues = values;
            }
        },
        getValues () {
            return this.values;
        },
        setValues (values) {
            var slotCount = this.slotCount;
            values = values || [];
            if (slotCount !== values.length) {
                throw new Error('values length is not equal slot count.');
            }
            values.forEach((value, index) => {
                this.setSlotValue(index, value);
            });
        }
    },

    computed: {
        values: {
            get () {
                var slots = this.slots || [];
                var values = [];
                var valueIndexCount = 0;
                slots.forEach(slot => {
                    if (!slot.divider) {
                        slot.valueIndex = valueIndexCount++;
                        values[slot.valueIndex] = (slot.values || [])[slot.defaultIndex || 0];
                    }
                });
                return values;
            }
        },
        slotCount () {
            var slots = this.slots || [];
            var result = 0;
            slots.forEach(function (slot) {
                if (!slot.divider) result++;
            });
            return result;
        }
    },

    components: {PickerSlot}
};
</script>
